<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px;">
            <div style="width: 755px;" v-if="promotional.cover">
                <img :src="promotional.cover" alt="" style="overflow: hidden; width: 755px;height: 390px;">
            </div>
            <div style="margin-top: 20px;">
                <div style="text-align: center; font-size: 24px;">
                    <span>{{ promotional.title_en }}</span>
                </div>
                <div style="text-align: center; margin-top: 10px;"><span>{{ promotional.addtime }}</span></div>
                <div v-html="promotional.content_en"></div>
            </div>
        </div>
    </div>
</template>
<script setup>

import { ref,watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {getPromotional} from '@/requests/index';


const router = useRouter();
const route = useRoute();
const promotional = ref({
    title: "",
    title_en: "",
    cover: "",
    content: "",
    content_en: "",
    addtime: ""
});
const queryParam = ref(route.query.id || '');


watch(() => route.query.id, (newId, oldId) => {
  queryParam.value = newId;
  getSinglePro(newId);
});


const getSinglePro = async(id)=>{
    const res = await getPromotional({"id": id});
    if (res.status===2000){
        promotional.value = res.data;
    }else{
        console.log(res.msg);
    }
}
getSinglePro(queryParam.value);

</script>